<template>
	<view class="page">
		<view class="content-bg">
			<!-- <image class="image" src="https://pw.qyang.cc/static/login-bg2.png" mode="aspectFit"></image> -->
			<image id="image" class="image" :src="rq.imgUrl(bg)" mode="widthFix"></image>
		</view>
		<image class="logo" :src="rq.imgUrl(logo)" mode="widthFix"></image>
		<!-- <view style="width: 100%; height: 300rpx; position: relative;"></view> -->
		<view class="content" style="margin-top: 300px;">
			<view class="title">
				欢迎登录陪玩
			</view>

			<view class="con">
				<u-tabs @click="click" :list="tablist" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
				        color: '#303133',
				        fontWeight: 'bold',
				        transform: 'scale(1.1)'
				    }" :inactiveStyle="{
				        color: '#606266',
				        transform: 'scale(1)'
				    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</u-tabs>
			</view>


		</view>
		<view class="con1">
			<view class="input">
				<input class="input1" placeholder="请输入账号" v-model="model.mobile" />
			</view>
			<view class="input" v-if="password">
				<input class="input1" placeholder="请输入密码" :password="showPassword" v-model="model.password" />
				<view class="input2" @click="changePassword">
					<i class="iconfont" v-if="showPassword">&#xe901;</i>
					<i class="iconfont" v-else>&#xe661;</i>
				</view>
			</view>
			<view class="input" v-else>
				<input class="input1" placeholder="请输入验证码" v-model="model.code" />
				<view class="input3" @click="huoqu">
					{{codeText}}
				</view>
			</view>
			<view class="check">
				<view class="check1">
					<checkbox :checked="radio" backgroundColor="#fff" iconColor="#fff" borderColor="#666"
						activeBackgroundColor="#F4858A" activeBorderColor="#F4858A" style="transform: scale(0.5)"
						@click="changeRadio()" />
					已阅读并同意 <span class="text" @click="agreement('user_agree','用户协议')">《用户协议》
					</span>和<span class="text" @click="agreement('privacy','隐私协议')">《隐私协议》</span>
				</view>
				<view class="text1" @click="goPage('/subpages/set/forgetPassword')">
					忘记密码？
				</view>
			</view>
			<view class="btn">
				<view class="btn1" @click="handleLogin">
					登录
				</view>
				<view class="btn2">
					还没有账号？
					<view class="register-btn" @click="register">
						立即注册
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="bottom">
				<u-divider text="第三方登录"></u-divider>
				<view class="bottom-btn">
					<button class="wx-btn" open-type="getPhoneNumber" v-if="radio" @click="getCode" @getphonenumber="getPhoneNumber">
						<image src="https://pw.qyang.cc/static/btn-wx.png" mode="aspectFit"></image>
					</button>
					<button class="wx-btn" v-else @click="showRadio">
						<image src="https://pw.qyang.cc/static/btn-wx.png" mode="aspectFit"></image>
					</button>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="bottom"></view>
			<!-- #endif -->
		</view>
		<agree-model :show="showAgree" :con="agreeCon" @close="agreeClose"></agree-model>
	</view>
</template>

<script>
	import {
		isMobile
	} from '@/utils/util.js'
	import agreeModel from '@/components/agree-model.vue'
	export default {
		components: {
			agreeModel
		},
		data() {
			return {
				tablist: [{
					name: '账号密码'
				}, {
					name: '短信验证'
				}],
				showPassword: true,
				radio: false,
				password: true,
				codeText: '获取验证码',
				model: {
					mobile: '',
					password: '',
					code: ''
				},
				bg: '',
				logo: '',
				code:'',
				showAgree: false,
				agreeCon: [{
						text: '用户协议',
						url: 'user_agree'
					},
					{
						text: '隐私协议',
						url: 'privacy'
					}
				],
			};
		},
		onLoad() {		
			this.rq.getData('common/logo').then(res => {
				this.bg = res.data.bg
				this.logo = res.data.logo
			})
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this); // 注意这里的this指向很重要，如果是全局函数，则需要其他方式传递上下文或使用箭头函数确保this指向正确
			query.select('#image').boundingClientRect(function(rect) {
				console.log(rect); // 输出元素高度
			}).exec();
		},
		methods: {
			agreeClose(e){
				if(e){
					this.radio = true
				}
				this.showAgree = false
			},
			handleLogin() {
				if (!this.radio) {
					// uni.showToast({
					// 	title: '请阅读并同意协议',
					// 	icon: 'none'
					// })
					this.showAgree = true
					return
				}
				if (!isMobile(this.model.mobile)) {
					return
				}
				if (this.password) {
					if (!this.model.password) {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						})
						return
					}
				} else {
					if (!this.model.code) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						})
						return
					}
				}
				if(getApp().globalData.inviteId){
					this.model.pid = getApp().globalData.inviteId
				}
				let url = this.password ? 'login/accountLogin' : 'login/smsLogin'
				this.rq.getData(url, this.model).then(res => {
					getApp().setToken(res.data.token, JSON.stringify(res.data.user))
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 1000,
						complete() {
							setTimeout(() => {
								if(res.data.user.suibian===0){
									uni.reLaunch({
										url: '/subpages/settled/settled'
									})
								}else{
									uni.switchTab({
										url: '/pages/index/index'
									})									
								}
							}, 1000)
						}
					})
				})
			},
			register() {
				uni.navigateTo({
					url: '/subpages/login/register'
				})
			},
			click(item) {
				if (item.name == '账号密码') {
					this.password = true
				} else {
					this.password = false
				}
			},
			login() {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							console.log('login', loginRes);
							resolve(loginRes.code)
						},
						fail(err) {
							reject(err)
						},
					});
				})
			},
			async getCode(){
				//#ifdef MP-WEIXIN
					let code =	await this.login()
					this.code=code
				//#endif
				//#ifndef MP-WEIXIN
					let authResult = await this.threeLogin('weixin')
					console.log('login', authResult);
					this.rq.getData('login/thirdAppLogin', {
						"authResult": authResult.authResult,
						"platform": 'wechat',
					}).then((res) => {
						console.log('login', res.data);
						getApp().setToken(res.data.token, JSON.stringify(res.data.user))
						if(res.data.user.mobile){
							if(res.data.user.suibian===0){
								uni.reLaunch({
									url: '/subpages/settled/settled'
								})
							}else{
								uni.switchTab({
									url: '/pages/index/index'
								})									
							}
						}else{
							// const tempData = {
							// 	token:res.data.token,
							// 	unionid:authResult.authResult.unionid
							// }
							// uni.setStorageSync('tempData',tempData)
							uni.navigateTo({
								url:'/subpages/login/bindPhone'
							})
						}
					});
				//#endif
			},
			threeLogin() {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							resolve(loginRes)
						},
						fail(err) {
							uni.showToast({
								title: `${JSON.stringify(err)}`,
								icon: 'none'
							})
							reject(err)
						},
					});
				})
			},
			async getPhoneNumber(e) {
				const _this = this
				// let code =	await this.login()
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log(e,"e")
					let formData = {
						code: this.code,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData
					};
					if(getApp().globalData.inviteId){
						formData.pid = getApp().globalData.inviteId
					}
					console.log(formData.pid,'formData.pid')
					console.log(getApp().globalData.inviteId,'getApp().globalData.inviteId')
					console.log(formData.pid,getApp().globalData.inviteId,'邀请人id')
					this.rq.getData('login/wxLogin', formData).then(({
						data
					}) => {
						const token = data.token;
						if (!token) {
							return false;
						}
						getApp().setToken(data.token, JSON.stringify(data.user))
						if(data.user.suibian===0){
							uni.reLaunch({
								url: '/subpages/settled/settled'
							})
						}else{
							uni.switchTab({
								url: '/pages/index/index'
							})									
						}

					});
				}
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			changeRadio() {
				this.radio = !this.radio
			},
			huoqu() {
				if (!isMobile(this.model.mobile)) {
					return
				}
				if (this.codeText !== '获取验证码') {
					return
				}
				this.rq.getData('Sms/send', {
					mobile: this.model.mobile,
					event: 'mobilelogin'
				}).then(res => {
					this.codeText = '60s'
					let time = 60
					const timer = setInterval(() => {
						time--
						this.codeText = time + 's'
						if (time == 0) {
							clearInterval(timer)
							this.codeText = '获取验证码'
						}
					}, 1000)
				})
			},
			// 协议
			agreement(type,title) {
				uni.navigateTo({
					url: '/subpages/platform/about-platform/about-platform?title='+title+'&type=' + type
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			showRadio() {
				//#ifndef MP-WEIXIN
					this.showAgree = true
				//#endif
				//#ifdef MP-WEIXIN
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none'
					})
				//#endif
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		// justify-content: flex-end;
		min-height: 100vh;
		background: #fff;
	}

	.logo {
		position: absolute;
		left: 50%;
		top: 200rpx;
		transform: translateX(-50%);
		width: 450rpx;
		z-index: 1;
	}

	.content-bg {
		background-color: #ffffff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 0;

		.image {
			width: 100vw;
			height: 100vh;
			// height: 667px;
			// margin-top: -350rpx;
		}
	}

	.con1 {
		position: relative;
		z-index: 2;
		padding: 40rpx;
		width: 100%;
		background: #FFF;
		background: linear-gradient(to bottom, #FFF, #FEF1F4);
		display: flex;
		flex-direction: column;
		bottom: 0;
		padding-bottom: 0rpx;
		box-sizing: border-box;
		flex: 1;

		.input {
			width: 100%;
			height: 48px;
			border-radius: 10px;
			opacity: 1;

			background: #FFFFFF;

			box-sizing: border-box;
			border: 1px solid #333333;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			margin-bottom: 20rpx;

			.input1 {
				width: 90%;
			}

			.input2 {
				width: 10%;
				padding: 0 10rpx;
				display: flex;
				justify-content: center;
			}

			.input3 {
				width: 30%;
				padding: 0 10rpx;
				display: flex;
				justify-content: center;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 14px;
				font-weight: 500;
				line-height: 20px;
				text-align: right;
				letter-spacing: 0px;
				color: #333333;
			}
		}

		.check {
			width: 100%;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 12px;
			font-weight: normal;
			line-height: 20px;
			letter-spacing: 0px;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.check1 {
				display: flex;
				align-items: center;
			}

			.text {
				color: #333333
			}

			.text1 {
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 12px;
				font-weight: normal;
				line-height: 13px;
				text-align: center;
				letter-spacing: 0px;
				color: #FF7681;
			}
		}

		.btn {
			display: flex;
			flex-direction: column;

			.btn1 {
				width: 100%;
				height: 48px;
				border-radius: 10px;
				opacity: 1;
				background: #FF5866;
				box-sizing: border-box;
				border: 1px solid #FF5866;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 22px;
				font-weight: 500;
				line-height: 20px;
				letter-spacing: 0px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 40rpx;
				letter-spacing: 10rpx;
			}

			.btn2 {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 12px;
				font-weight: normal;
				line-height: 20px;
				letter-spacing: 0px;
				color: #999999;
				margin-top: 40rpx;

				.register-btn {
					color: #FF7681;
				}
			}
		}


		.bottom {
			width: 100%;
			padding: 40rpx 0;

			.bottom-btn {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 37px;
					height: 37px;
				}

			}
		}
	}



	.content {
		// margin-top: -300rpx;
		position: relative;
		z-index: 1;
		padding-left: 40rpx;
		background-color: #FFF;
		// background: url('https://pw.qyang.cc/static/bg-1.png') no-repeat center center/cover;
		// padding-top: 80rpx;
		// padding-top: 40rpx;

		.title {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 26px;
			font-weight: 500;
			line-height: 20px;
			letter-spacing: 0px;
			color: #333333;
		}

		.con {
			margin-top: 30rpx;
			margin-left: -20rpx;
		}


	}
</style>